<template>
    <div class="download-tender">
        <div class="search-logo">
            <div class="logo">
                <img src="@/assets/images/logo.png" alt="">
                <p> 请输入手机号查询标书</p>
            </div>
            <div class="search">
                <el-form :inline="true">
                    <el-form-item label="手机号">
                        <el-input v-model="search.phone" placeholder="请输入" />
                    </el-form-item>
                    <el-form-item label="验证码">
                        <el-input v-model="search.code" placeholder="请输入">
                            <template #append>
                                <el-button v-if="!search.time" @click="getCode">获取</el-button>
                                <el-button v-else>{{ search.time }}</el-button>
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="getList">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div class="note">购买标书有问题,请联系 0574-28911770 </div>
        <div class="list">
            <el-table :data="list" style="width: 100%" border v-if="list.length" v-loading="loading">
                <el-table-column prop="name" label="项目名称" width="300" />
                <el-table-column prop="number" label="项目编号" />
                <el-table-column prop="customer_unit" label="购买单位" />
                <el-table-column prop="customer_name" label="联系人" />
                <el-table-column prop="customer_phone" label="手机号" />
                <el-table-column label="是否中标">
                    <template #default="scope">
                        <div v-text="scope.row.win_bid ? '已中标' : '未中标'" />
                    </template>
                </el-table-column>
                <el-table-column label="是否支付">
                    <template #default="scope">
                        <div v-text="scope.row.pay_state ? '已支付' : '未支付'" />
                    </template>
                </el-table-column>
                <el-table-column label="金额">
                    <template #default="scope">
                        <div style="color: #f40;">¥ {{ scope.row.money }}</div>
                    </template>
                </el-table-column>
                <el-table-column width="220px" label="操作">
                    <template #default="scope">
                        <template v-if="scope.row.pay_state">
                            <el-button type="primary" @click="download(scope.row)">下载标书</el-button>
                            <el-button type="primary" @click="toPrint(scope.row)" v-if="scope.row.win_bid">打印中标</el-button>
                        </template>

                        <template v-else>
                            <el-button type="primary" @click="wxPay(scope.row)">支付</el-button>
                            <el-button type="primary" @click="getState(scope.row.id)"
                                v-if="scope.row.pay_number">查询支付状态</el-button>
                        </template>

                    </template>
                </el-table-column>
            </el-table>
            <el-empty description="暂无数据" v-else />
        </div>
        <!-- 微信扫描二维码 -->
        <el-dialog v-model="pay.show" title="微信支付" width="400px" class="pay-qrcode" @closed="closedPay">
            <img :src="pay.qrcode" alt="">
            <el-button type="primary" @click="getState(pay.check.id)">查询支付状态</el-button>
        </el-dialog>
    </div>
</template>
<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import { getTenderOrder } from '@/api/tenderOrder';
import { sendCheckPhoneSms, getWxpayQrcode, getPayState } from '@/api/downloadTender';
import md5 from 'md5';
import QRCode from 'qrcode';
// 手机号验证
let search = ref({
    phone: '',
    code: '',
    checkCode: '',
    time: 0,
    timer: null
})
// 获取验证码
let getCode = () => {
    // 验证手机号
    if (/^1[0-9]{10}$/.test(search.value.phone)) {
        sendCheckPhoneSms({ phone: search.value.phone }).then(res => {
            ElMessage.success(res.info)
            search.value.checkCode = res.code;
            search.value.time = 59;
            search.value.timer = setInterval(() => {
                search.value.time--;
                if (search.value.time <= 0) clearInterval(search.value.timer);
            }, 1000);
        })

    } else {
        ElMessage.error('请检查手机号是否输入正确')
    }
}
// 查询数据
const list = ref([]),
    loading = ref(false);
let getList = () => {
    if (!search.value.code) {
        ElMessage.error('请输入验证码')
    } else {
        if (md5(search.value.code) == search.value.checkCode) {
            loading.value = true;
            let data = { query: { customer_phone: search.value.phone } };
            getTenderOrder(data).then(res => {
                if (res.data.length) {
                    list.value = res.data;
                } else {
                    ElMessage.error('此手机号暂无数据')
                }
                setTimeout(() => {
                    loading.value = false;
                }, 150);
            })
        } else {
            ElMessage.error('验证码错误')
        }
    }
}

// 去打印
let toPrint = (item) => {
    window.open('/download-tender/print?id=' + item.id);
}
// 下载标书
let download = (item) => {
    window.open(import.meta.env.VITE_DOWNLOAD + item.path);
}

// 支付
let pay = ref({
    show: false,
    qrcode: '',
    check: ''//选中项
})
let wxPay = (item) => {
    pay.value.check = item;
    pay.value.show = true;
    getWxpayQrcode({ id: item.id }).then(res => {
        getQrcode(res.data);
        getList();
    })
}
// 获取二维码
let getQrcode = (url) => {
    QRCode.toDataURL(url).then(url => { pay.value.qrcode = url; })
}
// 获取支付状态
let getState = (id) => {
    getPayState({ id }).then(res => {
        pay.value.show = false;
        ElMessage.success(res.info);
        getList();
    })
}

// 关闭支付弹窗结束
let closedPay = () => {
    pay.value.qrcode = '';
}


</script>
<style lang="scss" scoped>
.download-tender {
    width: 1400px;
    background-color: #fff;
    margin: 0 auto;
    margin-top: 40px;
    border-radius: 4px;
    overflow: hidden;

    .search-logo {
        margin: 20px 0;
        padding: 0 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .logo {
            display: flex;
            align-items: center;

            img {
                height: 30px;
            }

            p {
                margin-left: 20px;
                color: #666;
                font-size: 14px;
            }
        }

        .search {
            .el-form-item {
                margin-bottom: 0;
            }
        }
    }

    .note {
        padding: 20px;
        padding-top: 0;
        color: #666;
        font-size: 14px;
    }

    .list {
        padding: 20px;
        padding-top: 0;
    }

    ::v-deep .el-dialog {
        &.pay-qrcode {
            .el-dialog__body {
                padding-top: 0;
                text-align: center;

                img {
                    display: block;
                    margin: 0 auto;
                }
            }

        }

    }
}
</style>